<template>
    <div>
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="表格内容">
                <el-radio-group v-model="propJson.tableDataType">
                    <el-radio label="custom">自定义</el-radio>
                    <el-radio label="variable">关联变量</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义内容" v-if="propJson.tableDataType === 'custom'">
                <el-input v-model="propJson.tableDataCustomInfo" style="width: 100%" placeholder="自定义内容">
                    <template #prepend>
                        <el-select v-model="propJson.tableDataCustomType" placeholder="Select" style="width: 115px">
                            <el-option label="数组" value="Array" />
                        </el-select>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="变量名称" v-if="propJson.tableDataType === 'variable'">
                <el-select v-model="propJson.tableDataVariable" placeholder="变量名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否设置边框线">
                <el-radio-group v-model="propJson.isBorder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否设置斑马纹">
                <el-radio-group v-model="propJson.isStripe">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否设置溢出提示">
                <el-radio-group v-model="propJson.isOverFlowTip">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否添加操作列">
                <el-radio-group v-model="propJson.isAddOperate">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="操作列宽度" v-if="propJson.isAddOperate">
                <el-input-number v-model="propJson.operationWidth" :min="100"/>
            </el-form-item>

            <el-form-item label="自定义插槽名" v-if="propJson.isAddOperate">
                <el-input v-model="propJson.operateName" style="width: 100%" placeholder="自定义插槽名"/>
            </el-form-item>

            <el-form-item label="操作自定义" v-if="propJson.isAddOperate">
                <el-input v-model="propJson.operateHtml" style="width: 100%" placeholder="操作自定义内容" type="textarea"/>
            </el-form-item>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isAddOperate">
                <span style="font-size: 12px">自定义操作添加完后需要点击注入</span>
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isAddOperate">
                <el-button type="primary" class="addCollapse" size="small" @click="addOperate()">注入</el-button>
            </div>

            <el-form-item label="是否设置表格最大高度">
                <el-radio-group v-model="propJson.isMaxHeight">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="表格最大高度" v-if="propJson.isMaxHeight">
                <el-input v-model="propJson.maxHeight" style="width: 100%" placeholder="表格最大高度" />
            </el-form-item>

            <el-form-item label="是否添加复选框">
                <el-radio-group v-model="propJson.isSelection">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="复选框关联对象名称" v-if="propJson.isSelection">
                <el-select v-model="propJson.selectVarParamName" placeholder="变量名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>

            <el-form-item label="是否启用树形展示">
                <el-radio-group v-model="propJson.isTreeView">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="树形展示时需要rowKey" v-if="propJson.isTreeView">
                <el-input v-model="propJson.rowKey" style="width: 100%" placeholder="树形展示时需要rowKey" />
            </el-form-item>

            <el-form-item label="树形信息字段名" v-if="propJson.isTreeView">
                <el-input v-model="propJson.childrenName" style="width: 100%" placeholder="树形信息字段名" />
            </el-form-item>

            <el-form-item label="是否展示所有子信息" v-if="propJson.isTreeView">
                <el-radio-group v-model="propJson.isShowAllChildren">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否启用动态表格列">
                <el-radio-group v-model="propJson.isDynamicColumns">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isDynamicColumns">动态列获取</el-divider>

            <CommonThirdServiceValue v-if="propJson.isDynamicColumns" :actionInfo="propJson.dynamicColumnsInfo ? propJson.dynamicColumnsInfo : {}" :commonParam="commonParam" />

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addColVariable()">添加表格列字段</el-button>
            </div>

            <el-form :model="propJson" label-width="auto" style="width: 100%">
                <el-collapse>
                    <el-collapse-item :name="index" v-for="(item, index) in propJson.tableFieldList">
                        <template #title>
                            <div class="collapseTitle">
                                <span>字段 {{(index + 1)}}</span>
                                <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteColVariable(index)">删除</el-button>
                            </div>
                        </template>
                        <el-form-item label="字段名称">
                            <el-input v-model="item.variableLabel" style="width: 100%" placeholder="字段名称"/>
                        </el-form-item>

                        <el-form-item label="字段名称 - 英文">
                            <el-input v-model="item.variableLabelEN" style="width: 100%" placeholder="字段名称"/>
                        </el-form-item>
                        <el-form-item label="字段展示内容">
                            <el-radio-group v-model="item.showType">
                                <el-radio label="variable">绑定属性字段</el-radio>
                                <el-radio label="custom">自定义内容</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="字段绑定的对象属性" v-if="item.showType === 'variable'">
                            <el-input v-model="item.variableField" style="width: 100%" placeholder="字段绑定的对象属性"/>
                        </el-form-item>
                        <el-form-item label="自定义HTML" v-if="item.showType === 'custom'">
                            <el-input v-model="item.slotHtmlContent" style="width: 100%" placeholder="操作自定义内容" type="textarea"/>
                        </el-form-item>
                        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="item.showType === 'custom'">
                            <span style="font-size: 12px">自定义操作添加完后需要点击注入</span>
                        </div>
                        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="item.showType === 'custom'">
                            <el-button type="primary" class="addCollapse" size="small" @click="addTableFieldCustom(item)">注入</el-button>
                        </div>
                        <el-form-item label="字段对齐方式">
                            <el-radio-group v-model="item.isAlignCenter">
                                <el-radio label="left">左侧</el-radio>
                                <el-radio label="center">居中</el-radio>
                                <el-radio label="right">右侧</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </el-form>
    </div>
</template>

<script name="TableDrawer" lang="ts" setup>

import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addColVariable() {
    let variableInfo = {variableLabel: "", variableLabelEN: "",  variableField: "", isAlignCenter: "left", slotHtmlContent: "", showType: "variable"}
    propJson.value.tableFieldList.push(variableInfo)
}

function deleteColVariable(index) {
    // 删除数组中的数据
    propJson.value.tableFieldList.splice(index, 1);
}

function addOperate() {
    if (!propJson.value.slotList) {
        propJson.value.slotList = []
    }
    let existFlag = false
    // 遍历查询是否已经存在
    propJson.value.slotList.forEach(res => {
        if (res.slotName === propJson.value.operateName) {
            res.slotContent = propJson.value.operateHtml
            existFlag = true
        }
    })
    if (existFlag) {
        return
    }
    propJson.value.slotList.push({slotName: propJson.value.operateName, slotContent: propJson.value.operateHtml})
}

function addTableFieldCustom(item) {
    if (!propJson.value.slotList) {
        propJson.value.slotList = []
    }
    let existFlag = false
    // 遍历查询是否已经存在
    propJson.value.slotList.forEach(res => {
        if (res.slotName === item.variableLabelEN) {
            res.slotContent = item.slotHtmlContent
            existFlag = true
        }
    })
    if (existFlag) {
        return
    }
    propJson.value.slotList.push({slotName: item.variableLabelEN, slotContent: item.slotHtmlContent})
}
</script>

<style scoped lang="less">

</style>